<template>
  <!-- <Search @search-params="onSearch"></Search> -->
  <ContentWrap>
    <a-table :loading="pageParams.loading" :columns="columns" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'items'">
          <div v-for="item in record.items" :key="item.id"><a-image :width="80" :src="item.productImg" />{{ item.productName }} x {{ item.buyNum }}</div>
        </template>
        <template v-if="column.dataIndex === 'nickname'">
          <div>{{ record.order.nickname }}</div>
        </template>
        <template v-if="column.dataIndex === 'receiverAddress'">
          <div>{{ record.order.receiverAddress || "店内取餐" }}</div>
        </template>
        <template v-if="column.dataIndex === 'payAmount'">
          <div>{{ record.order.payAmount }}</div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span>
            <a-button :disabled="record.order.status !== 0" type="primary" @click="editColumn(record, 1)">完成订单</a-button>
            <a-divider />
            <a-button :disabled="record.order.status !== 0" type="warn" @click="editColumn(record, 2)">取消订单</a-button>
          </span>
        </template>
      </template>
    </a-table>
    <a-pagination v-model:current="pageParams.page" v-model:pageSize="pageParams.size" :total="pageParams.total" />
  </ContentWrap>
</template>
<script setup lang="ts">
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import Search from "./component/Search.vue";
import ContentWrap from "../../../components/ContentWrap/ContentWrap.vue";
import EditVue from "./component/Edit.vue";
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
import { Config, EventBus, Service } from "@/main";
import { TableProps } from "ant-design-vue";
import { showAlert } from "@/entity/helper/tips.helper";

const columns = [
  {
    title: "用户名",
    dataIndex: "nickname",
  },
  {
    title: "订单详情",
    dataIndex: "items",
  },
  {
    title: "支付金额",
    dataIndex: "payAmount",
  },
  {
    title: "操作",
    dataIndex: "action",
  },
];
const pageParams = reactive({
  loading: false,
  size: 3,
  page: 1,
  total: 0,
  status: null,
});
const data = ref<Array<{ id: string; name: string }>>([]);
const getListData = () => {
  pageParams.loading = true;
  Service.Shop.getOrderList(pageParams).then(res => {
    console.log(res);
    data.value = res.data;
    pageParams.loading = false;
    pageParams.total = res.total_recorl;
  });
};

const editColumn = (record: any, status: 1 | 2) => {
  console.log(record);
  Service.Shop.changeOrderStatus(record.order.id, status).then(() => getListData());
};
onMounted(() => {
  getListData();
  EventBus.on(Config.Event.refreshCategoryList, () => getListData());
  let timer = setInterval(() => getListData(), 10000);
});
onUnmounted(() => {
  EventBus.off(Config.Event.refreshCategoryList);
});
</script>
<style scoped>
.headBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
}
</style>
